<%@page contentType="text/html; charset=utf-8" pageEncoding="utf-8"  import="java.util.*,java.text.*,com.easy.common.web.servlet.*,com.easy.modules.sysmgr.web.form.*,com.easy.common.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>在线用户统计</title>
<%@ include file="/common/header/meta.jsp"%>
<%@ include file="/common/header/script.jsp"%>
<script type="text/javascript">
	var chart ;
	$(function() {
		chart() ;
		
		$("#dg").datagrid({
			url: base.contextPath+"/sysmgr/monitor/doNotNeedAuth_getOnlineInfo.do",
			idField: 'id', fit: true, border: false,
			remoteSort: false, striped:true,
			frozenColumns: [[
			    { field: 'ck', checkbox: true },
			    { field: 'id', title: 'ID', width: 100, hidden: true },
			    { field: 'sessionId', title: 'SESSION_ID', width: 250, hidden: true },
			    { field: 'truename', title: '真实名称', width: 80 }
			]],
			columns: [[
			    { field: 'account', title: '登录账号', width: 100, sortable: true }, 
			    { field: 'ip', title: 'IP', width: 140, sortable: true },
			    { field: 'logintime', title: '登录时间', width: 140, sortable: true }
			]]
		}) ;
		
		$.post(base.contextPath+"/sysmgr/loginlog/doNotNeedAuth_loginTimeChart.do", null, function(result) {
			setChart(result) ;
		}, 'json');
		
	});
	
	//强制用户退出
	function forceLogout() {
		$.post(base.contextPath+"/sysmgr/monitor/doNotNeedAuth_forceLogout.do", null, function(result) {
			$('#dg').datagrid('reload') ;
		}, 'json');
	}
	
	function setChart(data) {
		chart.series[0].remove(false); 
		chart.addSeries({
			data: data, 
			color: Highcharts.getOptions().colors[0],
			dataLabels: {
				enabled : true,
				rotation : -90,
				color : '#FFFFFF',
				align : 'right',
				x : 4,
				y : 10,
				style : {
					fontSize : '13px',
					fontFamily : 'Verdana, sans-serif'
				}
			}
		}, false);
		chart.redraw();
	}
	
	function chart() {
		chart = $('#container').highcharts({
	        chart: {
	        	type : 'column',
	        },
	        title: {
	            text: '用户登录时间段'
	        },
	        exporting : {
				filename : '用户登录时间分布'
			},
			xAxis : {
				categories : [ '00-02', '02-04', '04-06', '06-08', '08-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24' ],
				labels : {
					rotation : -45,
					align : 'right',
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			},
	        yAxis: {
	        	min : 0,
	            title: {
	                text: '时间段用户登录数'
	            }
	        },
	        legend : {
				enabled : false
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.x + '点</b><br/>' + '此时间段用户登录数量为: ' + this.y + '个用户';
				}
			},
	        series : [ {
	        	data: [],
	        	dataLabels : {
					enabled : true,
					rotation : -90,
					color : '#FFFFFF',
					align : 'right',
					x : 4,
					y : 10,
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
	        } ]
	    }).highcharts();
	}
	
</script>
</head> 

<body>
	<div class="easyui-layout" data-options="fit: true">
		<div data-options="region: 'center', border: false" style="overflow: hidden;">
			<div id="portal" class="easyui-portal" data-options="fit: true, border: false">
				<div style="width: 33%;">
					<div data-options="title: '统计&nbsp;&nbsp;[&nbsp;服务器启动时间：<%=DateFormat.getDateTimeInstance().format(ApplicationConstants.START_DATE) %>&nbsp;]',
					 height: 200, collapsible: false, closable: false, iconCls: 'icon-standard-time'">
						<div style="padding:5px;line-height: 30px;">
							<table>
								<tr>
									<td align="right"></td>
									<td></td>
								</tr>
								<tr>
									<td align="right">累计共接待过：</td>
									<td>
									<%=ApplicationConstants.TOTAL_HISTORY_COUNT %>人&nbsp;&nbsp;&nbsp;
									发生在<%=DateFormat.getDateTimeInstance().format(ApplicationConstants.MAX_ONLINE_COUNT_DATE) %></td>
								</tr>
								<tr>
									<td align="right">同时在线人数：</td>
									<td><%=ApplicationConstants.MAX_ONLINE_COUNT %>人</td>
								</tr>
								<tr>
									<td align="right">目前在线人数：</td>
									<td><%=ApplicationConstants.SESSION_MAP.size() %>人</td>
								</tr>
								<tr>
									<td align="right">登录用户：</td>
									<td><%=ApplicationConstants.CURRENT_LOGIN_COUNT %>人</td>
								</tr>
							</table>
						</div>
					</div>
					<div data-options="title: '图表', height: 370, collapsible: false, closable: false, iconCls: 'icon-standard-chart-bar'">
						<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>
					</div>
				</div>
				<div style="width: 34%;">
					<div data-options="title: '在线用户', height: 580, collapsible: false, closable: false, iconCls: 'icon-hamburg-customers', tools: [
					{iconCls: 'icon-hamburg-sign-out', handler: function () { forceLogout(); }},
					{iconCls: 'icon-hamburg-refresh', handler: function () { $('#dg').datagrid('reload'); }}
					]">
						<div id="dg"></div>
					</div>
				</div>
			</div>
		</div>
		
	</div>

	
	

</body>
</html>
